<template>
  <div>
    <!-- 投诉列表表格 -->
    <ProTable
      :columns="columns"
      :request="fetchList"
      row-key="id"
      :action-ref="setActionRef"
      :scroll="{ x: 1800 }"
      header-title=""
    >
      <template #operations="{ record }">
        <a-button v-auth="'demandDetailBtn'" type="text" @click="openAssignModal(record)">查看</a-button>
        <!-- <a-button type="text" @click="handleViewRemark(record, 'complaintRemark')"
          >查看投诉备注</a-button
        >
        <a-button type="text" @click="handleViewRemark(record, 'closeRemark')"
          >查看关闭备注</a-button
        > -->
        <a-button v-auth="'handleCloseBtn'" type="text" @click="openModal(record)">处理并关闭</a-button>
        <a-button v-auth="'demandDelBtn'" type="text" status="danger" @click="handleDelete(record.id)"
          >删除</a-button
        >
     
      </template>
    </ProTable>

    <!-- 指派专家弹窗 -->
    <a-modal title="指派专家" v-model:visible="assignModalVisible" @ok="handleAssign">
      <form layout="vertical">
        <a-form-item label="选择专家" field="expertId">
        <a-select v-model="assignUserId" placeholder="选择指派专家">
        <a-option
          v-for="expert in expertList"
          :key="expert.userId"
          :value="expert.userId"
        >
          {{ expert.name }}
        </a-option>
      </a-select>
      </a-form-item>
 
      <a-form-item label="备注" field="remark">
        <a-textarea v-model="remark" placeholder="请输入备注" />
      </a-form-item>
      </form>
    </a-modal>

    <!-- 查看备注弹窗 -->
    <a-modal
      title="查看备注"
      v-model:visible="remarkModalVisible"
      @ok="remarkModalVisible = false"
    >
      <p>{{ selectedRemark }}</p>
    </a-modal>

    <a-modal
      title="关闭投诉"
      v-model:visible="closeViewModalVisible"
      @ok="handleClose"
    >
    <a-form>
      <a-form-item label="关闭原因">

        <a-textarea v-model="closeReason" :rows="4" placeholder="请输入关闭原因" />
      </a-form-item>

    </a-form>
    
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import {
  getComplaintList,
  deleteComplaint,
  getExpertList,
  assignComplaint,
  getComplaintDetail,
  closeComplaint
} from "@/api/demandComplaint";
import { Message, Modal } from "@arco-design/web-vue";
const actionRef = ref();

const setActionRef = (ref) => {
  actionRef.value = ref;
};
const remark = ref("");
const closeReason = ref("");
const searchParams = reactive({
  complaintNo: "",
  contactPhone: "",
});

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
});

const data = ref([]);

const columns = [
  { title: "投诉单号", dataIndex: "complaintNo", width: 140,ellipsis:true },
  
  {
    title: "需求单状态",
    dataIndex: "status",
    valueEnum: {
    1: { text: '待处理', status: 'Success' },
    2: { text: '跟进中', status: 'Success' },
    '-1': { text: '已关闭', status: 'Error' },
  }
   
  },
  { title: "投诉时间", dataIndex: "createTime",width: 200 },
  { title: "接收人", dataIndex: "createUserName" },
  { title: "指派对象", dataIndex: "assignUserName" },
  { title: "用户姓名", dataIndex: "contactName" },
  { title: "手机号", dataIndex: "contactPhone" ,width: 130},
  { title: "用户地址", dataIndex: "contactAddress" },
  { title: "创建时间", dataIndex: "createTime", width: 180, hideInSearch: true },
  {
    title: "操作",
    dataIndex: "operations",
    slotName: "operations",
    width: 300,
    hideInSearch: true,
    fixed: 'right'
  },
];

const assignModalVisible = ref(false);
const assignUserId = ref(null);
const expertList = ref([]);
const remarkModalVisible = ref(false);
const selectedRemark = ref("");
const closeViewModalVisible = ref(false);
const current = ref(null)

const fetchList = async (params) => {
  const { data: responseData } = await getComplaintList({
    page: params.current,
    size: params.pageSize,
    condition: params,
  });
  pagination.total = responseData.total;
  return {
    data: responseData.list,
    total: responseData.total,
    success: true,
  };
};
const handleDelete = (id) => {
  Modal.confirm({
    title: "确认删除？",
    content: "此操作不可撤销",
    async onOk() {
      const { success } = await deleteComplaint({ id });
      if (success) {
        Message.success("删除成功");
        actionRef.value?.reload(); // 刷新表格数据
      }
    },
  });
};
const openAssignModal = async (record) => {
  assignModalVisible.value = true;
  const { data: expertData } = await getExpertList();
  expertList.value = expertData;
  assignUserId.value = record.assignUserId;
  const res = await getComplaintDetail({id:record.id})
  remark.value = res.data.remark

};

const handleAssign = async () => {
  const assignUserName = expertList.value.find(
    (item) => item.userId === assignUserId.value
  ).name;
  const { success } = await assignComplaint({
    assignUserId: assignUserId.value,
    remark: remark.value,
    assignUserName: assignUserName
  });
  if (success) {
    Message.success("指派成功");
    assignModalVisible.value = false;
    actionRef.value.reload()
  }
};

const handleViewRemark = (record, remarkType) => {
  selectedRemark.value = record[remarkType];
  remarkModalVisible.value = true;
};
const openModal = async (record) => {
  const res = await getComplaintDetail({id:record.id})
  current.value = res.data
  closeReason.value = res.data.closeRemark
  closeViewModalVisible.value = true;
};
const handleClose = async () => {
 const res = await closeComplaint({id:current.value.id,closeRemark:closeReason.value})
 Message.success('关闭成功');
 actionRef.value.reload();
};

onMounted(() => {
 
});
</script>
